<template>
	<view class="complaint">
		<view class="head_box w100">

		</view>
		<view class="no_abso">
			<view class="header_go_complaint flex">
				<view class="com_head_icon">
					<image class="w100 h100" src="../static/go_tousu.png" mode=""></image>
				</view>
				<view class="com_head_txt f500 s28 family">
					遇到消费问题？
				</view>
				<view class="com_btn s28 family f500 txtali" @click="goComplaint">
					去投诉
				</view>
			</view>
			<view class="con_box w100">
				<view class="three_list flex">
					<view class="three_txt_box" v-for="(item,index) in switchList" :key="index">
						<view
							:class="[threeIndex == index ? 'three_txt_active' : 'three_txt', 'f500', 's26', 'famil', 'txtali']"
							@click="setState(index)">
							{{item.name}}
						</view>
						<view class="xian_box" v-if="threeIndex == index"></view>
					</view>
				</view>
				<view class="content_box" v-for="(item,index) in complaintList" :key="index">
					<view class="img_box" v-if="item.state == 'normal'">
						<image class="w100 h100" src="../static/weishouwli.png" mode=""></image>
					</view>
					<view class="img_box" v-if="item.state == 'hidden'">
						<image class="w100 h100" src="../static/yichuli.png" mode=""></image>
					</view>
					<!-- <view class="img_box" v-if="threeIndex == 2">
						<image class="w100 h100" src="../static/cljs.png" mode=""></image>
					</view> -->
					<view class="left_txt_box">
						<view class="left_txt_list flex">
							<view class="left_txt_c s28 family f500">
								投诉人
							</view>
							<view class="left_txt_name s28 family f500">
								{{item.user.nickname}}
							</view>
						</view>
						<view class="left_txt_list flex">
							<view class="left_txt_c s28 family f500">
								联系电话
							</view>
							<view class="left_txt_name s28 family f500">
								{{item.mobile}}
							</view>
						</view>
						<view class="left_txt_list flex">
							<view class="left_txt_c s28 family f500">
								投诉店家
							</view>
							<view class="left_txt_name s28 family f500">
								{{item.shop.shopname}}
							</view>
						</view>
						<view class="left_txt_list flex">
							<view class="left_txt_c s28 family f500">
								投诉原因
							</view>
							<view class="left_txt_name s28 family f500">
								{{item.content}}
							</view>
						</view>
						<view class="left_txt_list flex">
							<view class="left_txt_c s28 family f500">
								投诉凭证
							</view>
							<view class="left_txt_name s28 family f500 flex" style="flex-wrap: wrap;">
								<view class="right_image_box" v-for="(items,indexs) in item.images" :key="index"
									style="margin-right: 12upx;margin-bottom: 12upx;">
									<image class="w100 h100" :src="items" mode=""></image>
								</view>
							</view>
						</view>
						<view class="left_txt_list flex">
							<view class="left_txt_c s28 family f500">
								提交时间
							</view>
							<view class="left_txt_name s28 family f500">
								{{get_date(item.createtime)}}
								
							</view>
						</view>
						<view class="left_txt_list flex" v-if="threeIndex == 2">
							<view class="left_txt_c s28 family f500">
								平台反馈
							</view>
							<view class="left_txt_name s28 family f500" style="color: #844902;">
								{{item.receipt}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tab_nav">
			<nav-bar nav_btn="back" :title="title" :color="color" :auto_img="image"></nav-bar>
		</view>
		<view class="no_txt" v-if="complaintList.length == 0">
			<view class="txt s36 fblod familytow txtali">
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '我要投诉',
				image: '../static/left_jian.png',
				color: 'white',
				threeIndex: 0,
				complaintList: [],
				switchList: [{
						name: '未受理'
					},
					{
						name: '已受理'
					}
				]
			}
		},
		onShow() {
			this.getListData()
		},
		methods: {
			// 获取举报列表
			getListData() {
				let that = this
				that.$request({
					url: 'complaint/lists',
					data: {
						state: that.threeIndex == 0 ? 'normal' : 'hidden'
					}
				}).then(res => {
					if(res.statusCode == 200) {
						that.complaintList = res.data.data.data
					}
				})
			},
			setState(ind) {
				this.threeIndex = ind
				this.getListData()
			},
			goComplaint() {
				uni.navigateTo({
					url: "./submitComplaint"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.complaint {
		overflow: hidden;

		.tab_nav {
			position: absolute;
			z-index: 9;
		}
		.txt {
			margin-top: 30%;
		}
		.head_box {
			height: 400upx;
			background-color: #EBBE87;
			overflow: hidden;
			position: fixed;
		}

		.no_abso {
			position: relative;
			z-index: 9999;

			.header_go_complaint {
				width: 686upx;
				height: 92upx;
				background: #DFB37C;
				border-radius: 12upx 12upx 12upx 12upx;
				margin: 202upx auto;
				margin-bottom: 0;

				.com_head_icon {
					width: 38upx;
					height: 38upx;
					margin-top: 26upx;
					margin-left: 20upx;
				}

				.com_head_txt {
					color: #844902;
					line-height: 92upx;
					margin-left: 14upx;
				}

				.com_btn {
					width: 156upx;
					height: 72upx;
					background: #844902;
					border-radius: 12upx 12upx 12upx 12upx;
					color: #E4B67D;
					line-height: 72upx;
					margin-top: 10upx;
					margin-left: 250upx;
				}
			}

			.con_box {
				background: #FFFFFF;
				border-radius: 36upx 36upx 0upx 0upx;
				margin-top: 44upx;
				overflow: hidden;

				.three_list {
					height: 76upx;
					margin: 30upx auto;
					margin-bottom: 0;

					.three_txt_box {
						width: 104upx;
						margin-left: 180upx;

						.three_txt {
							color: #999999;
						}

						.three_txt_active {
							color: #844902;
						}

						.xian_box {
							width: 32upx;
							height: 4upx;
							background-color: #844902;
							margin: 14upx auto;
						}
					}
				}

				.content_box {
					width: 686upx;
					background: #FAFAFA;
					border-radius: 28upx 28upx 28upx 28upx;
					border: 2upx solid #F4F4F4;
					margin: 38upx auto;
					overflow: hidden;

					.img_box {
						width: 178upx;
						height: 162upx;
						position: absolute;
						right: 32rpx;
					}

					.left_txt_box {
						margin-top: 32upx;
						margin-left: 32upx;

						.left_txt_list {
							margin-bottom: 20upx;

							.left_txt_c {
								width: 112upx;
								height: 40upx;
								color: #999999;
							}

							.left_txt_name {
								width: 498upx;
								color: #666666;
								margin-left: 10upx;
								overflow: hidden;

								.right_image_box {
									width: 134upx;
									height: 134upx;
									border-radius: 8upx 8upx 8upx 8upx;
								}
							}
						}
					}
				}
			}
		}

	}
</style>
